<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

        <!-- v-for: 循环遍历数组, 循环渲染 -->

    <div id="root">
        <!--<ul>-->
            <!--<li>zs</li>-->
            <!--<li>ls</li>-->
            <!--<li>wu</li>-->
            <!--<li>zl</li>-->
        <!--</ul>-->


        <!-- v-for: 在循环渲染的时候, 每一个被渲染出的标签都需要一个唯一的key来作为标识 -->

        <ul>
           <li v-for="(item, index) in list"   v-bind:key="index"   v-on:click="deleteli(index)">{{item}}--{{index}}</li>
        </ul>

    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                list: ["zs", "ls", "wu", "zl", "zl"]
            },
            methods: {
                deleteli: function (index) {
                    this.list.splice(index, 1)
                }
            }
        })
    </script>
</body>
</html>
